<template>
	<div style="display: flex;padding: .3rem;background: #FFFFFF;">
		<div class="container">
			<div class="container-left">
				<img class="avatar" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547643545440&di=1a84749e372c66f7dcdbb5f0cf026c08&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F01%2F30%2F40%2F09%2Fs_1024_58c63cb9a0cbe.png" />
				<span>区域总代理</span>
			</div>
			<div class="container-main">
				<p>
					<span>UI老胖啦</span>
					<img @click="goEditData" src="../../assets/icon/my-icon/bianji-4.png" />
				</p>
				<p>
					<span>推广码：</span>
					<span>222222222222</span>
				</p>
				<p>
					<span>推荐人：</span>
					<span>王小二</span>
				</p>
				<div>
					<div>
						<img src="../../assets/icon/my-icon/jinbi.png" />
						<span>12000</span>
					</div>
					<div class="progress-bar">
						<span>70%</span>
						<div></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			/**
			 * 	跳转至修改资料
			 */
			goEditData() {
				console.log('1234')
				this.$router.push({
					name: 'edit-my-data-index'
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container {
		width: 100vw;
		display: flex;
		justify-content: space-between;

		.container-left {
			flex-direction: column;
			align-items: center;
			display: flex;
			margin-right: .46rem;

			span {
				background: #218BFB;
				display: inline-block;
				height: 20px;
				color: #fff;
				border-radius: 4px;
				line-height: 20px;
				padding: 0 .05rem;
				margin-top: .26rem;
			}
		}

		.avatar {
			width: 1.6rem;
			height: 1.6rem;
			border-radius: 50%;
			border: .01rem solid #f7f7f7;
		}

		.container-main {
			flex: 1;
			font-size: 14px;

			p {
				height: .4rem;
				display: flex;
				align-items: center;
			}

			p:nth-child(1) {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: .2rem;

				img {
					width: .3rem;
				}
			}

			p:nth-child(2) {
				margin-bottom: .2rem;

				span:first-child {
					color: #9B9B9B;
				}
			}

			p:nth-child(3) {
				margin-bottom: .2rem;

				span:first-child {
					color: #9B9B9B;
				}
			}

			div:nth-child(4) {
				margin-top: .1rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				div:first-child {
					display: flex;
					align-items: center;

					img {
						width: .4rem;
						margin-right: .1rem;
					}

					span:nth-of-type(1) {
						font-size: 18px;
						color: #f5a623;
					}
				}

				.progress-bar {
					width: 2.6rem;
					height: .4rem;
					border: .01rem solid #FE9E2E;
					border-radius: .2rem;
					overflow: hidden;
					position: relative;

					div {
						width: 70%;
						height: .4rem;
						background: #FE9E2E;
						border-radius: .2rem;
					}

					span {
						color: #FFFFFF;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
</style>
